<template>
	<view class="withdrawal-records-page">
		<!-- 自定义头部 -->
		<headerSlotVue :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-container" @click="closePage()">
					<view class="back-btn">
						<text class="cuIcon-back"></text>
					</view>
					<view class="page-title">
						提现记录
					</view>
				</view>
			</template>
		</headerSlotVue>

		<!-- 状态筛选栏 -->
		<view class="filter-tabs">
			<scroll-view scroll-x class="tabs-scroll">
				<view class="tabs-container">
					<view 
						class="tab-item" 
						v-for="(item, index) in tabList" 
						:key="index"
						:class="{ active: index == TabCur }"
						@tap="tabSelect" 
						:data-id="index"
					>
						<text class="tab-text">{{item.title}}</text>
						<view v-if="index == TabCur" class="active-line"></view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 主要内容区域 -->
		<view class="content-container">
			<!-- 加载状态 -->
			<view v-if="loading && moreWithdrawal.length === 0" class="loading-container">
				<uni-load-more status="loading" :content-text="loadingText"></uni-load-more>
			</view>

			<!-- 空状态 -->
			<view v-else-if="!loading && moreWithdrawal.length === 0" class="empty-container">
				<view class="empty-icon">
					<text class="cuIcon-list"></text>
				</view>
				<view class="empty-text">暂无提现记录</view>
				<view class="empty-desc">您的提现记录将在这里显示</view>
							</view>

			<!-- 记录列表 -->
			<view v-else class="records-list">
				<view class="record-item" v-for="(item, index) in moreWithdrawal" :key="index">
					<view class="record-header">
						<view class="record-time">{{formatDate(item.createdAt)}}</view>
						<view class="record-status">
							<view class="status-icon" :class="item.status === 'pending' ? 'icon-pending' : item.status === 'processing' ? 'icon-processing' : item.status === 'success' ? 'icon-success' : item.status === 'failed' ? 'icon-failed' : item.status === 'cancelled' ? 'icon-cancelled' : 'icon-pending'">
								<text :class="item.status === 'pending' ? 'cuIcon-time' : item.status === 'processing' ? 'cuIcon-time' : item.status === 'success' ? 'cuIcon-roundcheck' : item.status === 'failed' ? 'cuIcon-roundclose' : item.status === 'cancelled' ? 'cuIcon-close' : 'cuIcon-time'"></text>
							</view>
							<text class="status-text" :class="item.status === 'pending' ? 'status-pending' : item.status === 'processing' ? 'status-processing' : item.status === 'success' ? 'status-success' : item.status === 'failed' ? 'status-failed' : item.status === 'cancelled' ? 'status-cancelled' : ''">{{setTypeText(item.status)}}</text>
						</view>
							</view>
					
					<view class="record-content">
						<view class="amount-info">
							<text class="amount-label">申请提现：</text>
							<text class="amount-value">￥{{formatAmount(item.amount)}}</text>
							</view>
						
						<view v-if="item.failReason" class="fail-reason">
							<text class="reason-label">失败原因：</text>
							<text class="reason-text">{{item.failReason}}</text>
						</view>
							</view>
							</view>
						</view>

			<!-- 加载更多 -->
			<view v-if="moreWithdrawal.length > 0" class="load-more-container">
				<uni-load-more 
					:status="loadMoreStatus" 
					:content-text="loadingText"
					@clickLoadMore="loadMore">
				</uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import headerSlotVue from '@/components/header-slot.vue';
	import {
		withdrawList
	} from "@/api/mine.js"
	
	export default {
		components: {
			headerSlotVue,
		},
		data() {
			return {
				loading: false,
				moreWithdrawal: [],
				pages: {
					page: 1,
					limit: 10,
				},
				noMoreData: false,
				totalPages: 0,
				status: '',
				TabCur: 0,
				scrollLeft: 0,
				loadMoreStatus: 'more',
				tabList: [{
						id: 0,
						title: '全部',
					}, {
						id: 1,
						title: '提现成功',
						status: 'success'
					}, {
						id: 2,
						title: '审核中',
						status: 'pending'
					},
					{
						id: 3,
						title: '提现失败',
						status: 'failed'
					}
				],
				loadingText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			};
		},
		onLoad() {
			this.init()
		},
		onPullDownRefresh() {
			this.refresh()
		},
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			async init() {
				if (this.status) {
					this.pages.status = this.status
				} else {
					delete this.pages.status
				}
				
				try {
					this.loading = true
					const res = await withdrawList({
					...this.pages,
					status: this.status
					})
					
					const newMessages = res.data.data.list || []
					const total = res.data.data.pagination.total || 0
					
					if (newMessages.length > 0) {
						this.moreWithdrawal = [...this.moreWithdrawal, ...newMessages]
						this.totalPages = Math.ceil(total / this.pages.limit)
						this.noMoreData = this.pages.page >= this.totalPages
					} else {
						this.noMoreData = true
						this.moreWithdrawal = []
					}
					
					this.updateLoadMoreStatus()
				} catch (error) {
					console.error('获取提现记录失败:', error)
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
					uni.stopPullDownRefresh()
				}
			},
			
			async refresh() {
				this.moreWithdrawal = []
				this.pages = {
					page: 1,
					limit: 10
				}
				this.noMoreData = false
				await this.init()
			},
			
			async loadMore() {
				if (this.noMoreData || this.loading) return
				
				this.pages.page++
				await this.init()
			},
			
			updateLoadMoreStatus() {
				if (this.moreWithdrawal.length >= this.totalPages * this.pages.limit && this.totalPages > 0) {
					this.loadMoreStatus = 'noMore'
					this.noMoreData = true
				} else if (this.moreWithdrawal.length === 0) {
					this.loadMoreStatus = 'more'
				} else {
					this.loadMoreStatus = 'more'
				}
			},
			
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.status = this.tabList[this.TabCur].status ? this.tabList[this.TabCur].status : ''
				this.moreWithdrawal = []
				this.pages.page = 1
				this.noMoreData = false
				this.init()
			},
			
			setTypeText(status) {
				const statusMap = {
					pending: '待审核',
					processing: '审核中',
					success: "提现成功",
					failed: "提现失败",
					cancelled: '取消提现'
				}
				return statusMap[status] || "未知状态"
			},
			

			
			closePage() {
				uni.navigateBack()
			},
			
			formatAmount(amount) {
				if (!amount && amount !== 0) return '0.00'
				return Number(amount).toFixed(2)
			},
			
			formatDate(dateString) {
				if (!dateString) return ''

				const date = new Date(dateString)
				const now = new Date()
				const diff = Math.floor((now - date) / 1000) // 秒差

				// 1分钟内
				if (diff < 60) return '刚刚'

				// 1小时内
				if (diff < 3600) return `${Math.floor(diff / 60)}分钟前`

				// 今天内
				if (date.toDateString() === now.toDateString()) {
					return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
				}

				// 今年内
				if (date.getFullYear() === now.getFullYear()) {
					return `${date.getMonth() + 1}月${date.getDate()}日`
				}

				// 其他
				return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.withdrawal-records-page {
		min-height: 100vh;
		background: #f5f7fa;
	}

	.header-container {
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		width: 100%;
		height: 88rpx;
		
		.back-btn {
			margin-right: 20rpx;
			padding: 8rpx;
			
			.cuIcon-back {
		font-size: 36rpx;
		color: #2C2622;
	}
		}
		
		.page-title {
			font-weight: 600;
		font-size: 36rpx;
		color: #2C2622;
	}
	}

	.filter-tabs {
		position: sticky;
		top: 0;
		z-index: 10;
		background: #FFFFFF;
		border-bottom: 1rpx solid #f0f0f0;
		
		.tabs-scroll {
			white-space: nowrap;
			
			.tabs-container {
				display: flex;
				padding: 0 32rpx;
				
				.tab-item {
					position: relative;
					padding: 32rpx 24rpx;
					margin-right: 48rpx;
					transition: all 0.3s;
					
					&:last-child {
						margin-right: 0;
					}
					
					.tab-text {
						font-size: 32rpx;
						color: #8F97A2;
						font-weight: 500;
						transition: all 0.3s;
	}

					.active-line {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
						width: 48rpx;
		height: 6rpx;
						background: linear-gradient(135deg, #FE6100 0%, #FF6B35 100%);
						border-radius: 3rpx;
					}
					
					&.active {
						.tab-text {
							color: #2C2622;
							font-weight: 600;
						}
					}
				}
			}
		}
	}

	.content-container {
		padding: 32rpx;
	}

	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
	}

	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 400rpx;
		
		.empty-icon {
			margin-bottom: 32rpx;
			
			.cuIcon-list {
				font-size: 120rpx;
				color: #c0c4cc;
			}
		}
		
		.empty-text {
			font-size: 32rpx;
			color: #606266;
			margin-bottom: 16rpx;
		}
		
		.empty-desc {
			font-size: 28rpx;
			color: #909399;
		}
	}

	.records-list {
		.record-item {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx 24rpx;
			margin-bottom: 24rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
			
			.record-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;
				
				.record-time {
					font-size: 28rpx;
					color: #606266;
				}
				
				.record-status {
					display: flex;
					align-items: center;
					
					.status-icon {
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 12rpx;
						
						text {
							font-size: 16rpx;
							color: #FFFFFF;
						}
						
						&.icon-pending {
							background: linear-gradient(135deg, #E6A23C 0%, #EEBE77 100%);
						}
						
						&.icon-processing {
							background: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%);
	}

						&.icon-success {
							background: linear-gradient(135deg, #67C23A 0%, #85CE61 100%);
						}
						
						&.icon-failed {
							background: linear-gradient(135deg, #F56C6C 0%, #F78989 100%);
						}
						
						&.icon-cancelled {
							background: linear-gradient(135deg, #909399 0%, #C0C4CC 100%);
						}
	}

					.status-text {
						font-size: 28rpx;
						font-weight: 600;
						
						&.status-pending {
							color: #E6A23C;
						}
						
						&.status-processing {
							color: #409EFF;
	}

						&.status-success {
							color: #67C23A;
						}
						
						&.status-failed {
							color: #F56C6C;
						}
						
						&.status-cancelled {
							color: #909399;
						}
					}
				}
	}

			.record-content {
				.amount-info {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;
					
					.amount-label {
						font-size: 28rpx;
						color: #606266;
					}
					
					.amount-value {
						font-size: 32rpx;
						color: #F56C6C;
						font-weight: 600;
					}
	}

				.fail-reason {
					display: flex;
					align-items: flex-start;
					
					.reason-label {
						font-size: 28rpx;
						color: #606266;
						margin-right: 12rpx;
					}
					
					.reason-text {
						flex: 1;
						font-size: 28rpx;
						color: #F56C6C;
						line-height: 1.5;
					}
				}
			}
		}
	}

	.load-more-container {
		margin-top: 32rpx;
		text-align: center;
	}
</style>